<template>
	<view>
		<header-box></header-box>
		<view class="content">
			<view class="card1" :class="{card11:tabIndex == 1,card12:tabIndex== 2}">
				<view class="tabs flex">
					<view class="flex-center" @click="changeTab('tabIndex',0)"><text v-show="tabIndex != 0">振金赛</text></view>
					<view class="flex-center" @click="changeTab('tabIndex',1)"><text v-show="tabIndex != 1">长老质押</text></view>
					<view class="flex-center" @click="changeTab('tabIndex',2)"><text v-show="tabIndex != 2">会长质押</text></view>
				</view>
				<view class="center">
					<view>开始日期：2020-08-08 15:20:10</view>
					<view>结束日期：2020-10-31 15:20:10</view>
				</view>
				<view class="bottom flex">
					<view class="flex-center" :class="{active:card1Index2 == 0}" @click="changeTab('card1Index2',0)">加入</view>
					<view class="flex-center" :class="{active:card1Index2 == 1}" @click="changeTab('card1Index2',1)">续押</view>
					<view class="flex-center" :class="{active:card1Index2 == 2}" @click="changeTab('card1Index2',2)">续押</view>
				</view>
			</view>
			<view class="card2">
				<view class="top">
					<view class="card2-1 flex-center">
						<view class="h2">会长</view>
						<view class="p">可乐直接领取</view>
					</view>
					<view class="card2-2 flex-between">
						<view class="card2-21 flex-center">
							Kim
						</view>
						<view class="card2-21 flex-center">
							Kim
						</view>
						<view class="card2-21 flex-center">
							Kim
						</view>
					</view>
				</view>
				<view class="card2-3 flex-between">
					<view class="card2-3-item flex-between">
						<view v-for="(item,index) in 3" :key="index">
							<image :src="url" mode="aspectFill" @click="showNickname('小兔子')"></image>
						</view>
					</view>
					<view class="card2-3-item flex-between">
						<view v-for="(item,index) in 3" :key="index">
							<image :src="url" mode="aspectFill" @click="showNickname('小兔子')"></image>
						</view>
					</view>
					<view class="card2-3-item flex-between">
						<view v-for="(item,index) in 2" :key="index">
							<image :src="url" mode="aspectFill" @click="showNickname('小兔子')"></image>
						</view>
						<view>
							
						</view>
					</view>
				</view>
			</view>	
		</view>
		<view class="card3">
			<view class="top flex-center">
				<view class="card3-box flex-between" :class="{card3_1:card3Index == 1,card3_2:card3Index == 2,card3_3:card3Index == 3,card3_4:card3Index == 4,card3_5:card3Index == 5,card3_6:card3Index == 6,}">
					<block v-for="(item,index) in 7" :key="index">
						<view class="flex-center" @click="changeTab('card3Index',index)">
							{{index}}/27
						</view>
					</block>
				
				</view>
			</view>
			<view class="bottom">
				<block v-for="(item,index) in 6" :key="index">
					<view class="list flex-between" >
						<view class="left">彭博亿万富翁</view>
						<view class="right flex">
							123456
							<image src="/static/arrow.png" mode="widthFix"></image>
						</view>
					</view>
				</block>
				
			</view>
		</view>
		<footer-box tabIndex="2"></footer-box>
	</view>
</template>

<script>
	import HeaderBox from '@/components/headerBox.vue'
	import FooterBox from '@/components/footerBox.vue'
	export default {
		components:{
			HeaderBox,FooterBox
		},
		data() {
			return {
				url:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2323865372,1573980372&fm=26&gp=0.jpg",
				tabIndex:0,
				card1Index2:0,
				card3Index:0
			};
		},
		methods:{
			changeTab(name,index){
				this[name] = index
			},
			showNickname(name){
				uni.showToast({
					title:"昵称："+name,
					icon:"none"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	page{
		padding: 0;
	}
	.content{
		padding: 0 30rpx;
	}
	.card1{
		width: 690rpx;
		height: 356rpx;
		background: url('/static/grade-card1-1.png') no-repeat 0 0;
		background-size: 100% 100%;
		margin: 40rpx 0 60rpx;
		&.card11{
			background-image: url('/static/grade-card1-2.png');
		}
		&.card12{
			background-image: url('/static/grade-card1-3.png');
		}
		.tabs{
			margin-left: 10rpx;
			view{
				width: 165rpx;
				height: 60rpx;
				transform: skew(-25deg);
				text{
					transform: skew(25deg);
					font-size: 28rpx;
					color: #ffffff;
				}
			}
			
		}
		.center{
			padding-left: 100rpx;
			margin: 75rpx 0 30rpx;
			font-size: 26rpx;
			color: #898ea3;
			line-height: 2.2;
		}
		.bottom{
			margin-left: 20rpx;
			view{
				width: 135rpx;
				height: 54rpx;
				background: url('/static/grade-card1-5.png') no-repeat 0 0;
				background-size: 100% 100%;
				font-size: 26rpx;
				color: #898ea3;
				&.active{
					height: 48rpx;
					background-image: url('/static/grade-card1-4.png');
					color:white;
				}
			}
		}
	}
	.card2{
		width: 690rpx;
		.top{
			width: 100%;
			height:300rpx;
			background: url('/static/grade-card2-1.png') no-repeat 0 0;
			background-size: 100% 100%;
			.card2-1{
				width: 242rpx;
				height: 114rpx;
				flex-direction: column;
				margin: 0 auto;
				.h2{
					font-size: 28rpx;
					color: #3df1be;
				}
				.p{
					font-size: 22rpx;
					color: #898ea3;
					transform: scale(.9);
				}
			}
			.card2-2{
				margin-top: 64rpx;
				.card2-21{
					width: 182rpx;
					height: 70rpx;
					font-size: 26rpx;
					color: #ffffff;
				}
			}
		}
		.card2-3{
			margin-top: 8px;
			.card2-3-item{
				width: 182rpx;
				view{
					width: 44rpx;
					height: 44rpx;
					background: url('/static/grade-card2-2.png') no-repeat 0 0;
					background-size: 100% 100%;
					border-radius: 4rpx;
					overflow: hidden;
					image{
						width: 100%;
						height:100%;
						background: #3df1be;
						
					}
				}
			}
		}
	}
	.card3{
		padding: 30rpx 30rpx 100rpx;
		margin-top: 100rpx;
		background-color: #262d3c;
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		.top{
			width: 689rpx;
			height: 657rpx;
			background: url('/static/grade-card3-bg.png') no-repeat 0 0;
			background-size: 100% 100%;
			.card3-box{
				width: 572rpx;
				height: 470rpx;
				background: url('/static/grade-card3-0.png') no-repeat 0 0;
				background-size: 100% 100%;
				flex-direction: column;
				&.card3_1{
					background-image: url('/static/grade-card3-1.png');
				}
				&.card3_2{
					background-image: url('/static/grade-card3-2.png');
				}
				&.card3_3{
					background-image: url('/static/grade-card3-3.png');
				}
				&.card3_4{
					background-image: url('/static/grade-card3-4.png');
				}
				&.card3_5{
					background-image: url('/static/grade-card3-5.png');
				}
				&.card3_6{
					background-image: url('/static/grade-card3-6.png');
				}
				view{
					height: 66rpx;
					font-size: 26rpx;
					color: #ffffff;
					padding-bottom: 10rpx;
					box-sizing: border-box;
					&:nth-child(1){
						width: 168rpx;
					}
					&:nth-child(2){
						width: 216rpx;
					}
					&:nth-child(3){
						width: 274rpx;
					}
					&:nth-child(4){
						width: 342rpx;
					}
					&:nth-child(5){
						width: 408rpx;
					}
					&:nth-child(6){
						width: 490rpx;
					}
					&:nth-child(7){
						width: 100%;
					}
				}
			}
		}
		.bottom{
			margin-top: 50rpx;
			.list{
				height: 100rpx;
				border-bottom: 2rpx solid #35b596;
				&:first-child{
					border-top: 2rpx solid #35b596;
				}
				.left{
					font-size: 32rpx;
					color: #ffffff;
				}
				.right{
					font-size: 28rpx;
					color: #898ea3;
					image{
						width: 30rpx;
						height:auto;
						margin-left: 15rpx;
					}
				}
			}
		}
	}
</style>
